import React from 'react'
import styles from './style.module.css'
import {Checkbox, Stepper} from 'antd-mobile'
import {createForm} from 'rc-form';
import {connect} from "react-redux";
import {main as mainAction, cart as cartAction} from "../../redux/actions/actionCreators";
import {withRouter} from 'react-router-dom'

const CheckboxItem = Checkbox.CheckboxItem;

const ListItem = ({item, checkboxChange, stepChange, selectedItems}) => {
    console.log(item);
    return (
        <div className={styles.listItem}>
            <div style={{display: 'flex', alignItems: 'center'}}>
                <CheckboxItem checked={selectedItems.includes(item.id)} onChange={checkboxChange}/>
            </div>
            <img src={item.imgUrl} alt="" style={{width: '80px', height: '80px'}}/>
            <div style={{
                padding: '4px 10px 2px 10px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
                width: '100%'
            }}>
                <div className={styles.describe}>
                    <b>{item.goodsTitle}</b>
                    <span style={{marginTop: '4px'}}>{item.colorTitle}</span>
                </div>
                <div className={styles.compute}>
                    <b style={{marginRight: '10px'}}>¥{item.price}</b>
                    <Stepper showNumber style={{width: '120px'}} max={10} min={1} value={item.num}
                             onChange={stepChange}/>
                </div>
            </div>
        </div>
    );
};

class Index extends React.Component {

    componentDidMount() {
        const {cart: { selectedItems}, dispatch} = this.props;

        // const checkList = goods.filter((item) => {
        //     return item.checked;
        // });
        //
        // request('/mine/shop-carts').then((result) => {
        //     const {shopCartList}=result;
        // }).catch(() => {
        //
        // });
        dispatch({
            type: 'request-cart-list',
            callback: (goods) => {
                this.setState({
                    checkedAll: selectedItems.length === goods.length
                });
            }
        });


    }

    state = {
        checkedAll: false
    };

    allToggleCheck = (e) => {
        const {cart: {goods}, dispatch} = this.props;
        this.setState({
            checkedAll: e.target.checked
        });

        let selectedItems;
        if (e.target.checked) {
            selectedItems = goods.map((item) => {
                return item.id
            });
        } else {
            selectedItems = [];
        }

        dispatch(cartAction.toggleCheck(selectedItems));
    };


    collect = () => {
        const {cart: {goods}} = this.props;
        const result = goods.filter((item) => {
            return item.checked;
        });
        console.log(result);
    };

    checkboxChange = (item) => {
        const {cart: {selectedItems, goods}, dispatch} = this.props;
        const _this = this;
        return function (e) {
            const newSelectedItems = selectedItems;
            if (e.target.checked) {
                newSelectedItems.push(item.id)
            } else {
                newSelectedItems.splice(newSelectedItems.indexOf(item.id))
            }
            console.log(newSelectedItems);
            dispatch(cartAction.toggleCheck(newSelectedItems));

            _this.setState({
                checkedAll: goods.length === newSelectedItems.length
            });

            // const checkList = newGoods.filter((item) => {
            //     return item.checked;
            // });
            //
            // if (checkList.length === newGoods.length) {
            //     _this.setState({
            //         checkedAll: true
            //     });
            // } else {
            //     _this.setState({
            //         checkedAll: false
            //     });
            // }
        }
    };

    stepChange = (item) => {
        const {cart: {goods}, dispatch} = this.props;
        return function (changeVal) {
            const newGoods = goods.map((val) => {
                if (val.id === item.id) {
                    return {...val, num: changeVal};
                } else {
                    return {...val};
                }
            });
            dispatch(cartAction.toggleCheck(newGoods));
        }
    };

    settle = () => {
        const {history, dispatch, cart} = this.props;
        const selectGoods = cart.goods.filter((item, key) => {
            return item.checked
        });
        console.log(selectGoods);
        dispatch({
            type: 'place-order',
            payload: selectGoods
        });
        history.push('/order/ensure')
    };

    render() {

        const {cart: {goods, selectedItems}, history} = this.props;
        return (
            <div className={styles.container}>
                <div className={styles.header}>
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        <i className={"iconfont icon-left"}
                           style={{fontSize: '15px', color: 'rgba(153,153,153,1)', marginRight: '2px'}} onClick={() => {
                            history.goBack();
                        }}/>
                        <i className={"iconfont icon-shop"} style={{fontSize: '30px'}}/>
                        卧槽商城

                    </div>
                    <div>
                        <b style={{marginRight: '20px'}} onClick={this.collect}>移入收藏</b>
                        <b>删除</b>
                    </div>
                </div>
                <div className={styles.content}>
                    {
                        goods.map((item, inx) => (
                            <ListItem
                                key={inx}
                                item={item}
                                checkboxChange={this.checkboxChange(item)}
                                stepChange={this.stepChange(item)}
                                selectedItems={selectedItems}
                            />))
                    }
                </div>

                <div className={styles.bottom}>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'space-around',
                        height: '50px',
                        alignItems: 'center'
                    }}>
                        <CheckboxItem onChange={(e) => this.allToggleCheck(e)} checked={this.state.checkedAll}>
                            <span style={{fontWeight: 800}}>全选</span>
                        </CheckboxItem>
                        <span className={styles.tips}>不含运费 合计 <b className={styles.money}>¥200.00</b></span>
                        <button className={styles.settleButton} onClick={this.settle}>结算</button>
                    </div>
                </div>

            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
    return {
        changeTab: (tab) => {
            dispatch(mainAction.changeTab(tab));
        },
        dispatch
    };
};
export default createForm()(connect((state) => ({
    cart: state.cart
}), mapDispatchToProps)(withRouter(Index)));
